<script setup lang="ts">

// import getLunarDate from "@/utils/getLunarDate.ts";

import Weather from "@/views/homeLayout/home/components/Weather.vue";

const year = ref(null)
const month = ref(null)
const day = ref(null)
const hours = ref(null)
const minutes = ref(null)
const seconds = ref(null)
const weekDay = ref(null)
const lunar = ref(0)


const weekDayOptions = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']


/*获取当前时间 并且动态更新时间*/
const getTime = () => {
  const date = new Date()
  year.value = date.getFullYear();
  month.value = String(date.getMonth() + 1).padStart(2, '0');
  day.value = String(date.getDate()).padStart(2, '0');
  hours.value = String(date.getHours()).padStart(2, '0');
  minutes.value = String(date.getMinutes()).padStart(2, '0');
  seconds.value = String(date.getSeconds()).padStart(2, '0');
  weekDay.value = weekDayOptions[date.getDay()];
}
const intervalId = ref(null)
onMounted(() => {
  getTime()
  intervalId.value = setInterval(() => {
    getTime()
  }, 1000)
})
onBeforeUnmount(() => {
  clearInterval(intervalId.value)
})

</script>

<template>
  <div class="weather-time">
    <div class="time">
      <span class="hour">{{ hours }}</span>
      <span class="colon">:</span>
      <span class="minute">{{ minutes }}</span>
      <!--      <span class="colon">:</span>-->
      <span class="second">{{ seconds }}</span>
    </div>
    <!--地理位置 -- 杭州市    -->
    <div class="city">
      <span class="city-name">杭州市</span>
      <span class="temperature">25°C</span>
      <span class="condition">晴</span>
    </div>
    <!--天气    -->
    <Weather class="weather"></Weather>
    <div class="date">
      <span class="year">{{ year }}年</span>
      <span class="month">{{ month }}月</span>
      <span class="day">{{ day }}日</span>

      <span class="week-day" style="margin: 0 8px">{{ weekDay }}</span>
      <span class="lunar">{{ lunar }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.weather-time {
  width: 100%;
  padding: 16px;
  text-align: left;
  background: url("/src/assets/images/img_1.png");
  position: relative;

  .time {
    font-size: 48px;
    line-height: 48px;
    font-weight: bold;
    font-family: 'UnidreamLED', serif;

    .colon {
      margin: 0 5px;
    }

    .second {
      margin-left: 8px;
      font-size: 24px;
    }
  }

  .city {
    .city-name {
      font-size: 24px;
      font-weight: bold;
    }

    .temperature {
      font-size: 20px;
      margin-left: 8px;
    }

    .condition {
      font-size: 16px;
      margin-left: 8px;
    }
  }

  .weather {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 80px;
    height: 80px;
  }

  .date {
    font-size: 14px;
  }

  .week {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

</style>
